<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="110px"
    class="ruleForm"
  >
    <h1>外出申请</h1>

    <el-form-item label="外出类型" prop="outReason">
      <el-radio-group v-model="ruleForm.outReason">
        <el-radio label="公务" name="outReason"></el-radio>
        <el-radio label="就医" name="outReason"></el-radio>
        <el-radio label="其他" name="outReason"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="外出时间段" prop="combineTime">
      <el-date-picker
        v-model="ruleForm.combineTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="外出开始时间"
        end-placeholder="预计返回时间"
        align="right"
        @change="getOutHour"
        :default-time="['8:00:00', '20:00:00']"
      >
      </el-date-picker>
    </el-form-item>

    <el-form-item label="外出地点" prop="outSite">
      <el-input v-model="ruleForm.outSite"></el-input>
    </el-form-item>

    <el-form-item label="外出时长" prop="outHour">
      <el-input v-model="ruleForm.outHour"></el-input>
    </el-form-item>

    <el-form-item label="持有48小时核酸证明" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="是"></el-radio>
        <el-radio label="否"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="备注" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { formatTimer } from '@utils'
import { createApplyGoOut } from '@api/admin'
export default {
  data () {
    return {
      ruleForm: {
        combineTime: '',
        outHour: '',
        outReason: '公务',
        outSite: '出门',
        outTime: '1',
        returnTime: '1',
        status: '0',
        userId: '',
        desc: ''
      },
      rules: {
        outReason: [
          { required: true, message: '请选择外出类型', trigger: 'change' }
        ],
        outSite: [
          { required: true, message: '请输入外出地点', trigger: 'blur' }
        ],
        combineTime: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    userId: {
      get () {
        return this.$store.state.user.id
      }
    }
  },
  methods: {
    getOutHour (val) {
      const [starttime, endtime] = [...val]
      const DateDifference = (faultDate, completeTime) => {
        // let d1 = new Date(faultDate);
        // let d2 = new Date(completeTime);
        var stime = new Date(faultDate).getTime()
        var etime = new Date(completeTime).getTime()
        var usedTime = etime - stime // 两个时间戳相差的毫秒数
        var days = Math.floor(usedTime / (24 * 3600 * 1000))
        // 计算出小时数
        var leave1 = usedTime % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
        var hours = Math.floor(leave1 / (3600 * 1000))
        // 计算相差分钟数
        var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000))
        var time = days + '天' + hours + '时'
        //  + minutes + '分'
        // var time = days;
        return time
      }
      this.ruleForm.outHour = DateDifference(starttime, endtime)
    },
    submitForm (formName) {
      const { combineTime } = this.ruleForm

      this.ruleForm.outTime = formatTimer(combineTime[0])
      this.ruleForm.returnTime = formatTimer(combineTime[1])
      this.ruleForm.userId = this.userId

      this.$refs[formName].validate(valid => {
        if (valid) {
          createApplyGoOut(this.ruleForm).then(res => {
            console.log(res)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.ruleForm {
  width: 80%;
  margin: auto;
  h1 {
    display: flex;
    justify-content: center;
  }
  .line {
    text-align: center;
  }
}
</style>
